



<template>
    <div class="sdy-register">
        <SdyHeader title="啥都有-注册" back></SdyHeader>
        <van-steps :active="active" finish-icon="like-o" class="steps" >
          <van-step>手机号验证</van-step>
          <van-step>验证码验证</van-step>
          <van-step>设置密码</van-step>
          <van-step>注册成功</van-step>
        </van-steps>

    <!-- 每一个步骤的内容 -->
    <!-- 步骤1: 验证手机号是否被注册过 -->
    <div v-if="active === 0" class="step0 step-item">
      <!-- 表单填写手机号 -->
      <van-form class="login-form" @submit="checkPhoneHandler">
        <van-cell-group inset>
          <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号', pattern: /\d{11}/ }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            验证
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- 获取验证码并验证验证码正确性 -->
    <div v-if="active === 1" class="step1 step-item">
      <van-form class="login-form" @submit="checkCodeHandler">
        <van-cell-group inset>
          <van-field
            v-model="code"
            center
            clearable
            placeholder="请输入短信验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <van-button :disabled="codeBtn" @click="sendCodeHandler" size="small" type="primary">发送验证码</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            验证
          </van-button>
        </div>
      </van-form>
    </div>

    <div v-if="active === 2" class="step2 step-item">
      <!-- 表单填写两次密码 -->
      <van-form class="login-form" @submit="registerHandler">
        <van-cell-group inset>
          <van-field
            v-model="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="rpwd"
            name="重复密码"
            label="重复密码"
            placeholder="重复密码"
            :rules="[{ required: true, message: '请填写重复密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>

        <div v-if="active ===3" class="step3 step-item">
          <van-icon class="finish" name="success" />
          <router-link to="/login"><van-button type="success">去登陆
                       </van-button>
          </router-link>
        </div>
    </div>
</template>



<script lang="ts" setup>
import { ref } from 'vue'
// 导入相关请求接口
import { checkPhoneApi,sendCodeApi,checkCodeApi,registerApi} from '@/api/users'
// 导入 avnt 的 Toast 弹出层
import { Toast } from 'vant';

const active = ref<number>(0)

// step1
const phone = ref<string>('')
const checkPhoneHandler = async()=>{
    const res= await checkPhoneApi(phone.value)
    console.log(res)

  // 判断结果
  // 表示可以继续
  if (((res as unknown) as { code: string }).code === '200') {
    // 继续下一步
    // 调整 active 就可以了
    active.value++
    return
  }

// 代码执行到这里, 说明手机号不行
Toast({
    message: '手机号已被注册',
    icon: 'phone-circle-o',
  })

}

// step2
const code = ref<string>('')
// 发送验证码按钮是否禁用
const codeBtn = ref<boolean>(false)
const sendCodeHandler = async()=>{
    codeBtn.value=true
    const res = await sendCodeApi(phone.value)
    console.log(res)
}

const checkCodeHandler = async()=>{
    const res = await checkCodeApi(phone.value,code.value)
    console.log(res) 

     // 表示可以继续
  if (((res as unknown) as { code: string }).code === '200') {
    // 继续下一步
    // 调整 active 就可以了
    active.value++
    return
  }

// 代码执行到这里, 说明手机号不行
Toast({
    message: '验证码错误',
    icon: 'phone-circle-o',
  })

}


// 注册密码
const password = ref<string>('')
const rpwd = ref<string>('')
const registerHandler = async ()=>{
  // 如果两次密码不一致
  if(password.value !== rpwd.value) return Toast({
    message: '密码错误',
    icon: 'phone-circle-o',
  })

  // 密码一致 发送请求
  
    const res = await registerApi(phone.value,password.value)
    console.log(res)

// 判断结果
  // 表示可以继续
  if (((res as unknown) as { code: string }).code === '200') {
    // 继续下一步
    // 调整 active 就可以了
    active.value++
    return
  }


}






</script>


<style scoped lang="scss">
.sdy-register {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  > .steps {
    width: 80%;
  }

  > .step-item {
    width: 80%;
    height: 200px;
    border: 1px solid #333;
    border-radius: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

.finish {
  font-size: 80px;
  color: rgb(127, 242, 127);
}
</style>